<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>Directive Scopes</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script type="text/javascript">
        angular.module("exampleApp", [])
            .directive("scopeDemo", function () {
                return {
                    template: 
                        "<div class='panel-body'>Name: <input ng-model=name /></div>",
                }
            })
        .controller("scopeCtrl", function ($scope) {
            // do nothing - no behaviours required
        });
    </script>
</head>
<body>
    <div ng-controller="scopeCtrl" class="panel panel-default">
        <div class="panel-body" scope-demo></div>
        <div class="panel-body" scope-demo></div>
    </div>
</body>
</html>
